<template>
	<div>
		<smpPanel>
			<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="query.body">
				<el-row>
					<el-col :span="6">
						<el-form-item label="菜单名称:" prop="name">
							<el-input v-model="query.body.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="菜单类型:" prop="type">
							<el-select v-model="query.body.type" placeholder="" style="width: 100%;">
								<el-option v-for="item in dict('SMP0006')" :key="item.itemCode" :label="item.itemName"
									:value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="6">
							<searchButtonGroup @search="getList" @reset="reset" online  />
					</el-col>
				</el-row>
				</el-row>
			</el-form>
		</smpPanel>

		<!-- <div class="smp-result smp_panel">
		<div class="smp_panel_header" >
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">菜单列表</div>
			 <div class="smp-panel_option">
				<el-button size="mini" plain type="primary" @click="addMenu">
					<i class="el-icon-circle-plus-outline"></i>
					新增</el-button>
			</div> 
		</div>
		<div class="smp_panel_body" > -->
		<smpPanel title="菜单列表">
			<createButton slot="option" @click="addMenu" />

			<el-table :data="list" size="mini" stripe border style="width: 100%">

				<el-table-column prop="name" label="菜单名称" width="300" align="center">
				</el-table-column>

				<el-table-column prop="path" label="菜单路径" show-overflow-tooltip width="300" align="center">
				</el-table-column>

				<el-table-column prop="parent" label="父菜单" align="center">
				</el-table-column>

				<el-table-column prop="level" label="菜单级别" align="center">
				</el-table-column>

				<el-table-column prop="menuOrder" label="菜单排序" align="center">
				</el-table-column>

				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="scope">
						{{scope.row.status|dictName("SMP0005")}}
					</template>
				</el-table-column>
				<el-table-column prop="type" label="菜单类型" align="center">
					<template slot-scope="scope">
						{{scope.row.type|dictName("SMP0006")}}
					</template>
				</el-table-column>

				<el-table-column prop="icon" label="菜单图标" align="center" show-overflow-tooltip="true">
				</el-table-column>

				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="handleEdit(scope.$index, scope.row)">修改</el-link>
						<el-divider direction="vertical"></el-divider>
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="delMenu(scope.$index, scope.row)">删除</el-link>
					</template>
				</el-table-column>

			</el-table>
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper"
					:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum"
					@current-change="currentChange" @size-change="sizeChange">
				</el-pagination>
			</div>
		</smpPanel>
		<menuEdit ref="menuEdit" @fresh="fresh" />
		<smpmenu ref="smpmenu" @fresh="fresh" />
		<menuDel ref="menuDel" @fresh="fresh" />
	</div>
</template>

<script>
	"use strict";
	import {
		selectByPage,
		deleteMenu
	} from '@/api/menu.js';
	import smpmenu from "./smpmenu";
	import menuEdit from "./menuEdit";
	import menuDel from "./menuDel";
	export default {
		data() {
			return {
				list: [],
				query: {
					body: {
						name: "",
						type: "",
						path: "",
						parent: "",
						level: "",
						menuOrder: "",
						status
					},
					pageNum: 1,
					pageSize: 5
				},
				total: 0
			};



		},

		components: {
			smpmenu,
			menuEdit,
			menuDel,
		},

		created() {
			Object.assign(this.query.body, this.$route.query);
			if (this.$route.query.pageNum != undefined) {
				this.query.pageNum = this.$route.query.pageNum;
			}
			if (this.$route.query.pageSize != undefined) {
				this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},
		methods: {

			addMenu() {
				this.$refs["smpmenu"].ShowDialog();
			},

			/**
			 * @param {Object} index
			 * @param {Object} row
			 */
			handleEdit(index, row) {
				this.$refs.menuEdit.ShowDialog(row);
			},

			delMenu(index, row) {

				this.$confirm('确认要删除菜单吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteMenu(row).then(response => {
						if (response.data.code == "0000") {
							this.$message.success(response.data.message);
							this.getList();
						} else {
							this.$message.error(response.data.message);
						}
					}).catch(error => {
						this.$message.error(error.message);
					});
				}).catch(() => {
					this.$message({
						duration: 5000,
						type: 'info',
						message: '已取消删除'
					});
				});
				//this.$refs.menuDel.ShowDialog(row);
			},


			getList() {
				selectByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;

					let query = {};
					Object.assign(query, this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					})
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},

			fresh() {
				this.getList();
			}

		}
	}
</script>

<style>
</style>
